<template>
  <div class="mobile-task-paper">
    <white-header
      :isShowTopNav="true"
      :isShowBack="true"
      :isShowRight="true"
      :title="taskPaper.paperName"
    ></white-header>
    <!-- 倒计时 -->
    <div class="count-down" v-if="seconds != 0 && questionList.length > 0">
      <img src="/img/mobile/answer_count_down.png" />
      <span class="time-label">倒计时：</span>
      <van-count-down :time="seconds" @finish="finish" />
    </div>
    <div class="question_box" id="question_box">
      <!-- 单选题 -->
      <div class="question-container" v-if="item.type == 1">
        <div class="question-type-title">
          <span class="t-left">单选题</span>
        </div>
        <div class="question-type-content">
          <div class="question-box" v-if="item.question">
            <template v-if="item.richTextSwitch == 1">
              <p
                class="question-title"
                v-html="item.question && item.question.question"
              ></p>
            </template>
            <template v-else>
              <p class="question-title">
                {{ item.question && item.question.question }}
              </p>
            </template>
            <van-radio-group v-model="item.user_answer" class="redio-group-box">
              <van-radio
                :name="index + 1"
                checked-color="var(--theme-color)"
                v-for="(item, index) in item.question.answer"
                :key="'radio-' + index"
              >
                <span v-if="item.richTextSwitch == 1" v-html="item"></span>
                <span v-else>
                  {{ item }}
                </span>
              </van-radio>
            </van-radio-group>
          </div>
        </div>
      </div>
      <!-- 多选题 -->
      <div class="question-container" v-if="item.type == 2">
        <div class="question-type-title">
          <span class="t-left">多选题</span>
        </div>
        <div class="question-type-content">
          <div class="question-box" v-if="item.question">
            <template v-if="item.richTextSwitch == 1">
              <p class="question-title" v-html="item.question.question"></p>
            </template>
            <template v-else>
              <p class="question-title">
                {{ item.question.question }}
              </p>
            </template>
            <van-checkbox-group
              v-model="item.user_answer"
              class="checkbox-group-box"
            >
              <van-checkbox
                :name="index + 1"
                checked-color="var(--theme-color)"
                shape="square"
                v-for="(item, index) in item.question.answer"
                :key="'radio-' + index"
              >
                <span v-if="item.richTextSwitch == 1" v-html="item"></span>
                <span v-else>
                  {{ item }}
                </span>
              </van-checkbox>
            </van-checkbox-group>
          </div>
        </div>
      </div>
      <!-- 简答题 -->
      <div class="question-container" v-if="item.type == 3">
        <div class="question-type-title">
          <span class="t-left">简答题</span>
        </div>
        <div class="question-type-content">
          <div class="question-box" v-if="item.question">
            <template v-if="item.richTextSwitch == 1">
              <p class="question-title" v-html="item.question.question"></p>
            </template>
            <template v-else>
              <p class="question-title">
                {{ item.question.question }}
              </p>
            </template>
            <div class="answer">
              <div class="answer-label">答：</div>
              <template v-if="item.richTextSwitch == 1">
                <RichText
                  :content="item.user_answer"
                  @handleChange="v => handleAnswerInputChange(v, item)"
                ></RichText>
              </template>
              <template v-else>
                <textarea
                  class="textarea-text"
                  v-model="item.user_answer"
                  placeholder="请填写您的答案"
                  ref="one-count"
                ></textarea>
              </template>
            </div>
            <div class="determine">
              <span style="color: #939699;"
                >共{{ item.user_answer ? item.user_answer.length : 0 }}字
              </span>
            </div>
          </div>
        </div>
      </div>
      <!-- 填空题 -->
      <div class="question-container" v-if="item.type == 4">
        <div class="question-type-title">
          <span class="t-left">填空题</span>
        </div>
        <div class="question-type-content">
          <div class="question-box" v-if="item.question">
            <template v-if="item.richTextSwitch == 1">
              <p class="question-title" v-html="item.question.question"></p>
            </template>
            <template v-else>
              <p class="question-title">
                {{ item.question.question }}
              </p>
            </template>
            <div class="answer" v-if="item.richTextSwitch == 1">
              <template v-for="(item1, index1) in item.user_answer">
                <div
                  class="answer-label"
                  :key="'cloze_list_box' + timestamp + index1"
                >
                  第{{ index1 + 1 }}空处：
                </div>
                <RichText
                  :content="item.user_answer[index1]"
                  :key="'t4' + index1"
                  @handleChange="v => handleAnswerInputChange(v, item, index1)"
                ></RichText>
              </template>
            </div>
            <div class="answer" v-else>
              <template v-for="(item1, index1) in item.user_answer">
                <div
                  class="answer-label"
                  :key="'cloze_list_box' + timestamp + index1"
                >
                  第{{ index1 + 1 }}空处：
                </div>
                <input
                  type="text"
                  class="input-text"
                  placeholder="请填写您的答案"
                  name="fname1"
                  v-model="item.user_answer[index1]"
                  @change="v => handleAnswerInputChange(v, item, index1)"
                  :key="'cloze_list_input' + timestamp + index1"
                />
              </template>
            </div>
          </div>
        </div>
      </div>
      <!-- 判断题 -->
      <div class="question-container" v-if="item.type == 5">
        <div class="question-type-title">
          <span class="t-left">判断题</span>
        </div>
        <div class="question-type-content">
          <div class="question-box" v-if="item.question">
            <template v-if="item.richTextSwitch == 1">
              <p class="question-title" v-html="item.question.question"></p>
            </template>
            <template v-else>
              <p class="question-title">
                {{ item.question.question }}
              </p>
            </template>
            <van-radio-group v-model="item.user_answer" class="redio-group-box">
              <van-radio :name="1" checked-color="var(--theme-color)"
                >正确
              </van-radio>
              <van-radio :name="2" checked-color="var(--theme-color)"
                >错误</van-radio
              >
            </van-radio-group>
          </div>
        </div>
      </div>
    </div>
    <!-- 正常考试按钮 -->
    <div class="btn-list">
      <div class="btn-row">
        <button
          class="btn"
          @click="nextQuestionBtn('prev')"
          v-if="questionList.length > 0"
        >
          上一题
        </button>
        <button
          class="btn"
          @click="nextQuestionBtn('next')"
          v-if="questionList.length > 0"
        >
          下一题
        </button>
      </div>
      <div
        class="btn"
        @click="handleSubmit"
      >
        提交答卷
      </div>
      <!-- <div class="btn" @click="$router.back()">
        退出
      </div> -->
    </div>
    <!-- 底部导航 -->
    <div class="question-footer" v-if="questionList && questionList.length > 0">
      <div></div>
      <span
        ><span style="font-weight:bold;">{{ num_active + 1 }}</span
        >/{{ questionList.length }}</span
      >
      <span @click="showAnswerSheet = true">答题卡</span>
    </div>
    <!-- 答题卡弹窗 -->
    <van-action-sheet
      v-model="showAnswerSheet"
      title="答题卡"
      class="answer-card"
    >
      <div class="answer-sheet-box">
        <div class="question-number">
          <div
            :class="[
              item.is_answer ? 'done' : null,
              'number-box',
              num_active == index ? 'active' : null
            ]"
            v-for="(item, index) in questionList"
            :key="'number-box' + index"
            @click="nextQuestionBtn('manual', index)"
          >
            {{ index + 1 }}
          </div>
        </div>
      </div>
    </van-action-sheet>
    <!-- 考试时间到 -->
    <div class="test-time-end" v-show="is_show_submit">
      <div class="test-close-box">
        <div class="clock-icon">
          <img src="/img/mobile/test_time_end.png" alt="" />
        </div>
        <p class="t-c-b-t">考试时间到，请停止作答！</p>
        <p class="t-c-b-l">试卷正在提交中，请稍等片刻...</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import WhiteHeader from "~/components/mobile/WhiteHeader.vue";
import { getPaperByTaskId, saveUserTask } from "~/api/task";
import RichText from "~/components/mobile/RichText.vue";
export default {
  name: "mobile-task-paper",
  components: {
    WhiteHeader,
    RichText
  },
  scrollToTop: true,
  data() {
    return {
      question_type_arr: [
        { id: 1, name: this.$t("locale.pc.mytest.testReview.t23") },
        { id: 2, name: this.$t("locale.pc.mytest.testReview.t24") },
        { id: 3, name: this.$t("locale.pc.mytest.testReview.t25") },
        { id: 4, name: this.$t("locale.pc.mytest.testReview.t26") },
        { id: 5, name: this.$t("locale.pc.mytest.testReview.t27") }
      ], //题型
      paperMsgBox: true,
      taskPaper: {},
      is_done_test: false,
      seconds: 0,
      questionList: [],
      num_active: 0,
      is_show_logout: false,
      is_show_submit: false,
      showAnswerSheet: false
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      is_loading(state) {
        return state.is_loading;
      },
      kl_md(state) {
        return state.kl_md;
      },
      web_info(state) {
        return state.web_info;
      }
    }),
    timestamp() {
      return new Date().getTime() + "" + Math.random() * 100000;
    },
    item() {
      let res = this.questionList.filter((i, x) => x == this.num_active);
      if (res.length > 0) {
        return res[0];
      } else {
        return {};
      }
    },
    /* 作业Id */
    taskId() {
      return this.$route.query.taskId;
    }
  },
  watch: {},
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    handleAnswerInputChange(v, item, index) {
      console.log(v, item, index);
      // console.log(this.questionList);
      //填空题  多个富文本
      if (index !== undefined) {
        this.questionList = this.questionList.map(i => {
          if (i.id == item.id) {
            return {
              ...i,
              user_answer: i.user_answer.map((i1, x1) => {
                if (index == x1) {
                  if (typeof v == "object") {
                    return v.target.value;
                  }
                  return v;
                } else {
                  return i1;
                }
              })
            };
          } else {
            return i;
          }
        });
        //简单题  单个富文本
      } else {
        this.questionList = this.questionList.map(i => {
          if (i.id == item.id) {
            return {
              ...i,
              user_answer: v
            };
          } else {
            return i;
          }
        });
      }
    },
    nextQuestionBtn(type, index) {
      if (type === "next") {
        if (this.num_active == this.questionList.length - 1) {
          // this.num_active = 0;
          this.$toast("当前是最后一题哟！");
          return;
        }
        // this.num_active++;
        document.getElementById("question_box").classList.add("fadeInLeft");
        setTimeout(() => {
          this.num_active++;
          document.getElementById("question_box").classList.remove("fadeInLeft");
        }, 500);
      } else if (type === "prev") {
        if (this.num_active == 0) {
          // this.num_active = this.questionList.length;
          this.$toast("当前是第一题哟！");
          return;
        }
        // this.num_active--;
        document.getElementById("question_box").classList.add("fadeInRight");
        setTimeout(() => {
          this.num_active--;
          document.getElementById("question_box").classList.remove("fadeInRight");
        }, 500);
      } else if (type === "manual") {
        // this.num_active = index;
        this.showAnswerSheet = false;
        document.getElementById("question_box").classList.add("fadeInLeft");
        setTimeout(() => {
          this.num_active = index;
          document.getElementById("question_box").classList.remove("fadeInLeft");
        }, 500);
      }
    },
    async getTaskPaper() {
      this.SET_IS_LOADING(true);
      let result = await getPaperByTaskId(this.taskId);
      if (result && result.data && result.data.code == 200) {
        const { questionJson } = result.data.data;
        this.taskPaper = {
          ...result.data.data,
          questionJson: JSON.parse(questionJson)
        };
        this.questionList = [];
        JSON.parse(questionJson).forEach(item => {
          this.questionList = [...this.questionList, ...item.questionIds];
        });
        this.questionList = this.questionList.map(item => {
          return {
            ...item,
            user_answer: item.type != 4 ? undefined : item.question.answer
          };
        });
        this.seconds = Number(this.taskPaper.testTime) * 60 * 1000;
      } else {
        this.$toast(this.$t("locale.pc.classroom.t43"));
      }
      this.SET_IS_LOADING(false);
    },
    formatDate(timestamp) {
      let date = new Date(timestamp);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      let add0 = m => {
        return m < 10 ? "0" + m : m;
      };
      let showTime = null;
      if (new Date(timestamp).toDateString() === new Date().toDateString()) {
        if (hour < 10) {
          showTime = "上午";
        } else if (hour < 12) {
          showTime = "中午";
        } else if (hour < 18) {
          showTime = "下午";
        } else {
          showTime = "晚上";
        }
        // console.log("今天", showTime + " " + add0(hour) + ":" + add0(minute));
        return showTime + " " + add0(hour) + ":" + add0(minute);
      } else {
        // console.log("以前", add0(year) + "/" + add0(month) + "/" + add0(day));
        return add0(year) + "/" + add0(month) + "/" + add0(day);
      }
    },
    /* 倒计时结束 */
    finish() {
      this.is_show_submit = true;
      this.handleSubmit("finish");
    },
    async saveUserTask(){
        this.SET_IS_LOADING(true);
        let answerArr = this.questionList.map(item=>{
            return {
                id:item.id,
                user_answer:item.user_answer ? item.user_answer : null
            }
        })
        let params = {
          paperAnswer:JSON.stringify(answerArr),
          userId:this.user_info.id,
          taskId:this.taskId
        }

        console.log(params);
        let fd = new FormData();
        Object.keys(params).forEach(i => {
            if(params[i] || params[i] === 0){
                fd.append(i, params[i]);
            }
        });
        let result = await saveUserTask(fd);
        if (result && result.data && result.data.code == 200) {
            this.$toast("试卷提交成功！");
            this.$router.push('/m/my-task');
        }else if(result && result.data && result.data.code == 1001){
          this.$toast(result.data.msg);
        }else {
          this.$toast("试卷提交失败！");
        }
        this.SET_IS_LOADING(false);
    },
    handleSubmit(type) {
      if (type == "finish") {
        setTimeout(() => {
          this.saveUserTask();
        }, 2000);
      } else {
        this.$dialog
          .confirm({
            title: this.$t("locale.pc.mytest.testReview.t34"),
            message: this.$t("locale.pc.mytest.testReview.t35")
          })
          .then(() => {
            this.saveUserTask();
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    /* 初始化页面 */
    initPage() {
      /* 考试 */
      this.getTaskPaper();
    },
    /* 阻止F5刷新 */
    keydown(e) {
      var evt = window.event || e;
      var code = evt.keyCode || evt.which;
      console.log("code:", code);
      //组合事件
      if (
        code == 116 ||
        (evt.ctrlKey == true && code == 82) ||
        (evt.ctrlKey == true && code == 116) ||
        code == 114
      ) {
        if (evt.preventDefault) {
          evt.preventDefault();
        } else {
          evt.keyCode = 0;
          evt.returnValue = false;
          evt.cancelBubble = true;
          return false;
        }
      }

      //屏蔽Alt+F4
      if (evt.altKey && code == 115) {
        window.showModelessDialog(
          "about:blank",
          "",
          "dialogWidth:1px;dialogheight:1px"
        );
        evt.keyCode = 0;
        evt.returnValue = false;
        evt.cancelBubble = true;
        return false;
      }

      //屏蔽 Alt+ 方向键 ← ;屏蔽 Alt+ 方向键 → ！验证
      if (evt.altKey && (code == 37 || code == 39)) {
        console.log("网页路由");
        evt.keyCode = 0;
        evt.returnValue = false;
        evt.cancelBubble = true;
        return false;
      }
    },
    /* 阻止刷新 */
    reflesh(e) {
      var evt = window.event || e;
      let message = undefined;
      evt.returnValue = message;
      return message;
    },
    context(e) {
      return false;
    },
    /* 阻止页面前进后退 */
    popstate(e) {
      history.replaceState(null, null, document.URL);
    },
    /* 清除刷新事件 */
    removeReflesh() {
      console.log("清除刷新事件！");
      if (process.client) {
        document.addEventListener("keydown", this.keydown, false);
        document.addEventListener("contextmenu", this.context, false);
        window.addEventListener("beforeunload", this.reflesh, false);
        history.pushState(null, null, document.URL);
        window.addEventListener("popstate", this.popstate, false);
      }
    },
    /* 恢复刷新事件 */
    destroyRemotion() {
      console.log("恢复事件！");
      if (process.client) {
        document.removeEventListener("keydown", this.keydown);
        document.removeEventListener("contextmenu", this.context);
        window.removeEventListener("beforeunload", this.reflesh);
        window.removeEventListener("popstate", this.popstate);
      }
    }
  },
  created() {
    this.initPage();
  },
  mounted() {},
  activated() {
    /* 重置state */
    this.initPage();
  },
  deactivated() {
    this.destroyRemotion();
  },
  destroyed() {
    this.destroyRemotion();
  }
};
</script>
<style lang="scss" scoped>
@keyframes fadeInLeft {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-100%);
  }
  51% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes fadeInRight {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100%);
  }
  51% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
.van-count-down {
  color: var(--theme-color);
  line-height: 0.4224rem;
  font-size: 0.34559rem;
  font-size: 0.36rem;
}
.colon {
  display: inline-block;
  // margin: 0 4px;
  color: var(--theme-color);
  font-size: 0.34559rem;
  font-size: 0.36rem;
  line-height: 0.4224rem;
}
.block {
  display: inline-block;
  // width: .5rem;
  color: var(--theme-color);
  font-size: 0.34559rem;
  font-size: 0.36rem;
  text-align: right;
  text-align: center;
  background-color: #fff;
  line-height: 0.4224rem;
}
.mobile-task-paper {
  background-color: #f7f7fa;
  min-height: 100vh;
  width: 7.2rem;
  padding-bottom: 1rem;
  // 倒计时
  .count-down {
    width: 6.624rem;
    height: 0.96rem;
    background-color: #ffffff;
    border-radius: 0.096rem;
    margin: 0.288rem auto 0;
    display: flex;
    align-items: center;
    padding: 0 0.288rem;
    img {
      width: 0.4224rem;
      height: 0.4224rem;
      display: block;
      background: var(--theme-color);
      //   margin-top: -0.05rem;
    }
    .time-label {
      color: var(--theme-color);
      font-size: 0.34559rem;
      margin-left: 0.34559rem;
      margin-right: 0.2rem;
      line-height: 0.4224rem;
    }
  }
  .question_box {
    .question-container {
      width: 6.624rem;
      background-color: #ffffff;
      border-radius: 0.096rem;
      margin: 0.288rem auto 0;
      .question-type-title {
        padding: 0.288rem;
        font-size: 0.2688rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: bold;
        border-bottom: 0.026rem solid #e3e4e6;
        .t-left {
          color: #4a4b4d;
        }
        .t-right {
          color: var(--theme-color);
        }
      }

      .question-type-content {
        padding: 0.288rem;
        .question-box {
          .question-title {
            color: #4a4b4d;
            font-size: 0.288rem;
          }
          //单选题/判断题
          .redio-group-box {
            margin-top: 0.2rem;
            .van-radio__label {
              font-size: 0.288rem;
            }
            .van-radio__icon {
              font-size: 0.288rem;
            }
            .active {
              color: var(--theme-color);
              .van-radio__icon {
                .van-icon {
                  background-color: var(--theme-color);
                  border-color: var(--theme-color-darker);
                  &::before {
                    color: #fff;
                  }
                }
              }
              .van-radio__label {
                color: var(--theme-color);
              }
            }
            .van-radio {
              margin-bottom: 0.2rem;
              font-size: 0.3455rem;
            }
          }
          //多选题
          .checkbox-group-box {
            margin-top: 0.2rem;
            .van-checkbox__icon {
              font-size: 0.288rem;
            }
            .active {
              color: var(--theme-color);
            }
            .van-checkbox {
              margin-bottom: 0.2rem;
              font-size: 0.288rem;
            }
          }
          // 简答题
          .answer {
            margin-top: 0.2rem;
            .answer-label {
              padding: 0.2rem 0;
              font-size: 0.2688rem;
              color: #4a4b4d;
            }
            .textarea-text {
              margin: 0.1rem 0;
              width: 100%;
              height: 3rem;
              font-size: 0.2688rem;
              color: #4a4b4d;
              padding: 0.1rem;
            }
            .input-text {
              margin: 0.15rem 0;
              width: 100%;
              height: 0.6rem;
              line-height: 0.6rem;
              font-size: 0.2688rem;
              color: #4a4b4d;
              padding: 0 0.1rem;
            }
          }
          .determine {
            display: flex;
            font-size: 0.288rem;
            margin-bottom: 0.1rem;
            justify-content: flex-end;
          }
        }
      }
    }
  }
  // 错题回顾按钮/正常考试按钮
  .btn-list {
    .btn {
      margin: auto;
      width: 6.624rem;
      height: 0.8448rem;
      font-size: 0.288rem;
      line-height: 0.8448rem;
      text-align: center;
      background-color: var(--theme-color);
      color: #ffffff;
      border-radius: 0.4224rem;
      border: none;
      outline: none;
    }
    .btn-row {
      display: flex;
      justify-content: space-around;
      margin: 0.4rem auto;
      .btn {
        width: 3.072rem;
      }
    }
  }
  // 底部导航
  .question-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 7.2rem;
    height: 0.9408rem;
    background: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 0.4rem;
    justify-content: space-between;
    color: var(--theme-color);
    font-size: 0.288rem;
    // img{
    //     display: block;
    //     width: .3264rem;
    //     height: .3264rem;
    //     background-color: var(--theme-color);
    // }
    .collection {
      width: 0.3264rem;
      height: 0.3264rem;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
  // 答题卡弹窗
  .answer-sheet-box {
    height: calc(80vh - 44px);
    overflow: auto;
    width: 7.2rem;
    .box-title {
      padding: 0.288rem;
      font-size: 0.2688rem;
      font-weight: bold;
      color: #4a4b4d;
      background-color: #f7f8fa;
    }
    .question-number {
      display: flex;
      flex-wrap: wrap;
      padding: 0.288rem 0.576rem 0.288rem;
      width: 100%;
      background: #ffffff;

      .number-box {
        margin: 0.095rem 0.095rem;
        width: 0.672rem;
        height: 0.672rem;
        background-color: #ebf2ff;
        border-radius: 0.0768rem;
        text-align: center;
        line-height: 0.672rem;
        font-size: 0.3455rem;
        color: var(--theme-color);
        &.active {
          background: var(--theme-color);
          color: #ffffff;
        }

        // 修改已做题颜色<--
        &.wrong {
          background-color: #f39090;
          color: #fff;
        }
        // 修改已做题颜色-->

        // &.wrong {
        //   background-color: #fceded;
        //   color: #f39090;
        // }
      }
      .done {
        color: #fff;
        // background-color: #07c160;
        background-color: #5fd598;
      }
      // .active.wrong {
      //   background-color: #f39090;
      //   color: #fff;
      // }
    }
    // .row-number {
    //   display: flex;
    //   justify-content: space-between;
    //   margin-bottom: 0.288rem;
    //   &:last-child {
    //     margin-bottom: 0rem;
    //   }
    // }
  }
  // 考试时间到
  .test-time-end {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2001;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    .test-close-box {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 5.76rem;
      height: 3.36rem;
      background-color: #ffffff;
      border-radius: 0.1344rem;
      .clock-icon {
        width: 1.2864rem;
        height: 1.2864rem;
        margin: 0.5rem auto 0;
        // margin: .576rem auto 0;
        background: var(--theme-color);
        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .t-c-b-t {
        font-size: 0.3455rem;
        text-align: center;
        color: var(--theme-color);
        margin: 0.2rem 0;
      }
      .t-c-b-l {
        text-align: center;
        font-size: 0.2688rem;
        color: #adafb3;
      }
    }
  }
  // 中途退出
  .drop-out {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2001;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    .drop-out-box {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 6.048rem;
      height: 4.416rem;
      background-color: #ffffff;
      border-radius: 0.1344rem;
      .out-icon {
        width: 1.1232rem;
        height: 1.1232rem;
        margin: 0.5rem auto 0.3rem;
        background: var(--theme-color);
        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .drop-out-tips {
        font-size: 0.288rem;
        color: #494b4d;
        line-height: 0.4608rem;
        text-align: center;
        font-weight: bold;
      }
      .drop-out-list {
        width: 4.8rem;
        margin: 0.4rem auto 0;
        display: flex;
        justify-content: space-between;
        .list-item {
          width: 1.536rem;
          height: 0.672rem;
          line-height: 0.672rem;
          border-radius: 0.336rem;
          text-align: center;
          font-size: 0.288rem;
          &.btn-left {
            background-color: #edf0f5;
            color: #adafb3;
          }
          &.btn-right {
            background-color: #5b96ff;
            color: #fff;
          }
        }
      }
    }
  }
  // 提前交卷
  .advance-submit {
    .head-tips {
      padding: 0 0.288rem 0.288rem;
      text-align: center;
      font-size: 0.3264rem;
      line-height: 0.48rem;
      color: #494b4d;
      .not-question-count {
        font-size: 0.34rem;
        margin: 0 0.1rem;
        color: var(--theme-color);
      }
    }
    .question-container {
      width: 100%;
      height: 5rem;
      overflow: auto;
      .answer-sheet-box {
        width: 7.2rem;
        height: 5rem;
        .box-title {
          padding: 0.288rem;
          font-size: 0.2688rem;
          font-weight: bold;
          color: #4a4b4d;
          background-color: #f7f8fa;
        }
        .question-number {
          padding: 0.288rem 0.576rem;
          background: #ffffff;
        }
        .row-number {
          display: flex;
          justify-content: space-between;
          margin-bottom: 0.288rem;
          &:last-child {
            margin-bottom: 0rem;
          }
          .number-box {
            width: 0.672rem;
            height: 0.672rem;
            background-color: #ebf2ff;
            border-radius: 0.0768rem;
            text-align: center;
            line-height: 0.672rem;
            font-size: 0.3455rem;
            color: var(--theme-color);
            &.active {
              background: var(--theme-color);
              color: #ffffff;
            }
            &.wrong {
              background-color: #fceded;
              color: #f39090;
            }
          }
          .active.wrong {
            background-color: #f39090;
            color: #fff;
          }
        }
      }
    }
    .advance-footer {
      width: 7.2rem;
      height: 1.92rem;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0.0384rem 0.48rem 0 rgba(60, 64, 72, 0.3);
      .advance-submit-btn {
        width: 6.624rem;
        height: 0.8448rem;
        background-color: var(--theme-color);
        border-radius: 0.4224rem;
        color: #ffffff;
        text-align: center;
        line-height: 0.8448rem;
        font-size: 0.288rem;
      }
    }
  }
}
.fadeInLeft {
  transform-style: preserve-3d;
  transform-origin: left;
  animation: fadeInLeft 0.5s ease-in;
}
.fadeInRight {
  transform-style: preserve-3d;
  transform-origin: right;
  animation: fadeInRight 0.5s ease-in;
}
</style>
<style lang="scss">
.mobile-task-paper {
  .answer-card {
    .van-action-sheet__content {
      height: calc(80vh - 44px);
      overflow: auto;
    }
  }
}
</style>
